<template>
  <div class="container">
    <quill-editor
    v-model:value="state.content"
    :options="state.editorOption"
    @change="changeBtn"
  />

  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  name: 'Question',
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  setup (props, { emit }) {
    const state = reactive({
      content: '<p></p>',
      editorOption: {
        placeholder: '请输入内容',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote'],
            ['code-block', 'image', 'link']
            // [{ header: 1 }, { header: 2 }],
            // [{ script: 'sub' }, { script: 'super' }],
            // [{ indent: '-1' }, { indent: '+1' }],
            // [{ direction: 'rtl' }],
            // [{ size: ['small', false, 'large', 'huge'] }],
            // [{ header: [1, 2, 3, 4, 5, 6, false] }],
            // [{ color: [] }, { background: [] }],
            // [{ font: [] }],
            // [{ align: [] }],
            // ['clean'],
          ]
        }
        // more options
      }
    })
    function changeBtn () {
      console.log('changeBtn', state.content)
      emit('update:modelValue', state.content)
    }

    return { state, changeBtn }
  }

}
</script>
<style scoped lang="less">
  .container{
     width: 100%;

     :deep(.ql-editor) {
    height: 250px;
  }
  }
</style>
